<!DOCTYPE html >
<html>
<head>
	<meta charset="utf-8">
	<title>JTOPO特殊虚线(由圆点构成，并且圆点有箭头可动)</title>
	<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script>
	<script src="jtp/jtopo-0.4.8-min.js" type="text/javascript"></script>

	<script type="text/javascript">
		$(document).ready(function(){
			CanvasRenderingContext2D.prototype.JtopoDrawPointCircle=function(a,b,c,d,e,f,g){
				this.strokeStyle=e;
				this.fillStyle=f;
				var animespeed=(new Date())/50;
				var xs=c- a,
						xy=d- b,
						l = Math.floor(Math.sqrt(xs * xs + xy * xy)),
						j=l;
						xl=xs/ l,
						yl=xy/l;
				var colorpoint=parseInt(animespeed%l);
				r=5;

				for(var i=0;i<j;i=i+r*3){
					if(colorpoint>i-r*2 && colorpoint<=i+r ){
						this.translate(a+i*xl,b+i*yl)
						this.rotate((Math.atan(xy/xs)));
						this.drawImage(g,-8,-8,16,16)
						this.rotate(-(Math.atan(xy/xs)));
						this.translate(-a-i*xl,-b-i*yl);
//						this.drawImage(img,a+i*xl,b+i*yl,r,0,2*Math.PI,10,10);

					}else{
						this.beginPath();
						this.arc(a+i*xl,b+i*yl,r,0,2*Math.PI);
						this.fill();
						this.stroke();
					}




				}
			};






			var canvas = document.getElementById('canvas'); //舞台
			var stage = new JTopo.Stage(canvas);//场景
			//显示工具
			var scene = new JTopo.Scene(stage);

			var node = new JTopo.Node("Hello");
			node.setLocation(10, 10);
			scene.add(node);

			var node2 = new JTopo.Node("Hello");
			node2.setLocation(400, 200);
			scene.add(node2);
			var link1=new JTopo.Link(node,node2);
			link1.PointCircleColor="rgb(255,255,0)";//圆心
			var linkpointimage=new Image();//设置图片
			linkpointimage.src="img/testspecialline1.png";
			link1.PointAnimeImg=linkpointimage;

			link1.strokeColor="255,0,255";//圆边

			link1.paintPath = function(a, b) {
				if (this.nodeA === this.nodeZ) return void this.paintLoop(a);
				a.beginPath();
						a.moveTo(b[0].x, b[0].y);
				for (var c = 1; c < b.length; c++) {

					null == this.dashedPattern ? (
							(null==this.PointCircleColor?a.lineTo(b[c].x, b[c].y):a.JtopoDrawPointCircle(b[c - 1].x, b[c - 1].y, b[c].x, b[c].y, a.strokeStyle,this.PointCircleColor,this.PointAnimeImg))
					) : a.JTopoDashedLineTo(b[c - 1].x, b[c - 1].y, b[c].x, b[c].y, this.dashedPattern)
				};
				if (a.stroke(), a.closePath(), null != this.arrowsRadius) {
					var d = b[b.length - 2],
							e = b[b.length - 1];
					this.paintArrow(a, d, e)
				}
			};
			scene.add(link1)

		});

	</script>
</head>
<body>
<canvas width="800"height="500"id="canvas"style=" background-color:#EEEEEE; border:1px solid #444;">
</canvas>
</body>
</html>